<div style="text-align:center;">
Sit down, young one, I'm so happy tonight that I want to share [[this story->SCENE 2]] with you!
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
You! Yes you over there! [[come here->SCENE 1]]!
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Tavern_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Tavern_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
The story of the people that brought peace to this world started in [[this very tavern->SCENE 3]].
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
<span style="display:block; text-align:center; opacity:0; animation: fadeIn 2s forwards;">It started with our one and only hero...</span><span style="display:block; text-align:center; opacity:0; animation: fadeIn 2s 2s forwards;">Uhhhh... what was [[their name->NAME INPUT]] again?</span>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
(print: $heroName)?
<span style="display:block; text-align:center; opacity:0; animation: fadeIn 2s 2s forwards;">No, that doesn't sound right... Are you sure?</span><span style="display:block; text-align:center; opacity:0; animation: fadeIn 2s 4s forwards;">Wait I remember, [[don't help me->SCENE 5]] ...</span>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))
<div style="text-align:center;">
|askName>[
What's your name?
(input-box: bind $heroName)
(link-repeat: "Continue")[
(if: $heroName is not "")[
(go-to: "SCENE 4")
]
(else:)[
(alert: "Please enter a name first!")
]
]
]
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#473E35))<div style="text-align:center;">
Ah yes, (print:$heroName)... [[Long ago->SCENE 6]], they and their band of heroes stood against Guilladin, the dread overlord who cast his shadow upon our world.
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
<img src="Title_Screen.png" style="width:800px;">
<br>
[[Play->SCENE 7]]
[[Restart->START]]
</div>
<style>
tw-link {
color: #7C3333 !important;
text-decoration: none;
}
tw-link:hover {
color: #2D0304 !important;
}
tw-link.visited {
color: #541A1A !important;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#948D8D))
<div style="text-align:center;">
<span style="font-style:italic;">The town is bustling with people celebrating. It's the night of the festival celebrating the [[Great Survival of the Hob-Horde->SCENE 8]]. A mouthful if you ask me, but the celebration is more important than the name for it.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Tavern_Party.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Tavern_Party.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">It's not every day a town is able to fend off a horde of hobgoblins sent by Guilladin. That wizard is a scourge on the land, yet no one has been able to take him down. Many dont even [[dare to try->SCENE 9]].
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">I'm one of the few that make a living out of thwarting the evil forces of Guilladin. An adventurer, as we've been called. But tonight isn't about adventuring, it's about [[taking a break->SCENE 10]].
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">I enter the local tavern and sit at the counter as I order a mug of ale. Through the chattering of the crowd, I can hear a [[murmuring->SCENE 11]] spreading across the tavern.
</span>
</div>
<audio src="Door_Sound.mp3" autoplay></audio>
(enchant:?page,(text-colour:#78B07A)+(bg:#473E35))<div style="text-align:center;">
<span style="font-style:italic;">They keep saying something about the Princess... </span>
<span class="fade-left">I heard she just vanished</span>
<span class="fade-right">Nobody has heard anything about her for hours...</span>
<span class="fade-center">Did she get [[caught by Guilladin->SCENE 11.1]]?</span>
</div>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
color: #38778B; /* warm gold accent that fits the teal background */
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: left;
animation-delay: 2s;
}
.fade-right {
text-align: right;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#473E35))
<div style="text-align:center;">
<span style="font-style:italic;">That certainly can't be true. If the Princess was missing, the Royal Guard would have said something about this!
Probably just rumors anyway... Very well then, [[time to drink->SCENE 12]]!
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#473E35))<div style="text-align:center;">
<span style="font-style:italic;">Someone was trying to talk to me</span>
<span class="fade-left">(print:$heroName)...</span>
<span class="fade-right">(print:$heroName)!</span>
<span class="fade-center">(print:$heroName), [[WAKE UP->SCENE 13]]!</span>
</div>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
color: #38778B; /* warm gold accent that fits the teal background */
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: right;
animation-delay: 2s;
}
.fade-right {
text-align: right;
animation-delay: 4s;
}
.fade-center {
text-align: right;
animation-delay: 6s;
}
</style>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Morning_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Morning_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(bg:#000000)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I finally open my eyes. The barmaid is looking at me worriedly. She's shoving me around, and is about to slap me silly.</span>
</div>
<span class="fade-left">AH, WAIT! I'M AWAKE! I'M AWAKE! DON'T </span>
<span class="fade-right">[[HIT ME--->SCENE 14]]</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
color: #78B07A; /* warm gold accent that fits the teal background */
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: left;
animation-delay: 2s;
}
.fade-right {
text-align: left;
animation-delay: 4s;
}
.fade-center {
text-align: left;
animation-delay: 6s;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:left;">
Ow...
<span class="fade-left">Just wake up already, DARNIT!</span>
<span class="fade-right hero-text">[[The King->SCENE 15]] is asking for you!</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: right;
animation-delay: 2s;
color: #38778B; /* warm gold accent */
}
.fade-right {
text-align: right;
animation-delay: 4s;
color: #38778B; /* matches first line’s green */
}
.fade-center {
text-align: right;
animation-delay: 6s;
color: #38778B; /* warm gold accent */
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<audio src="Slap_Sound.mp3" autoplay></audio><div style="text-align:center;">
<span style="font-style:italic;">I stand up quickly and salute as soon as I hear his Highness calls. </span>
<div style="text-align:left;">
<span style="display:inline-block; opacity:0; animation:fadeIn 1s forwards 2s;">
THE KING??? [[I GOTTA GO->SCENE 16]]!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<div id="sceneText" style="opacity:0; transition: opacity 1.5s ease-in;">I kneel before the King, his royal cape drooping before me. I don't even need to look up to feel his intense stare. The throne room's silence is deafening until [[the King interjects->SCENE 17]]...
</div>
<script>
let runSound=new Audio("Run_Sound.mp3");
runSound.volume=0.8;
runSound.play();
runSound.addEventListener("ended",()=>{
let sceneText=document.getElementById("sceneText");
if(sceneText)sceneText.style.opacity=1;
if(window.bgMusic){
let fadeOut=setInterval(()=>{
if(window.bgMusic.volume>0.05)window.bgMusic.volume-=0.05;
else{clearInterval(fadeOut);window.bgMusic.pause();window.bgMusic=new Audio("ThroneRoom_Ambience.mp3");window.bgMusic.volume=0;window.bgMusic.loop=true;window.bgMusic.play();let fadeIn=setInterval(()=>{if(window.bgMusic.volume<0.5)window.bgMusic.volume+=0.05;else clearInterval(fadeIn)},200)}},200)}else{window.bgMusic=new Audio("ThroneRoom_Ambience.mp3");window.bgMusic.loop=true;window.bgMusic.volume=0.5;window.bgMusic.play()}})</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#4D1F19))<div style="text-align:right;">
<span class="fade-center">Young adventurer... You're our last hope.</span>
<span class="fade-left">We need your help! During yesterday's festival, the Princess disappeared from her room, and we can only assume that it was that damned wizard's doing.</span>
<span class="fade-right">Guilladin must be stopped!</span>
<span class="fade-left">Unfortunately, most of our brave heroes in this village have been incapacitated overnight, and it would seem that [[you->SCENE 18]] are one of the few people with the skills I need and the constitution to continue after a good night of partying.</span>
</div>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
color: #CA894F; /* warm gold accent on dark background */
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
line-height: 1.5em;
margin-top: 10px;
}
/* Position + timing for each line */
.fade-left {
text-align: right;
}
.fade-right {
text-align: right;
}
.fade-center {
text-align: right;
}
/* Animation delays for staggered appearance */
.fade-center:nth-of-type(1) { animation-delay: 1s; }
.fade-left:nth-of-type(2) { animation-delay: 3s; }
.fade-right:nth-of-type(3) { animation-delay: 5s; }
.fade-left:nth-of-type(4) { animation-delay: 7s; }
</style>
(enchant:?page,(text-colour:#CA894F)+(bg:#4D1F19))<div style="text-align:center;">
<span style="font-style:italic;">It's certainly not every day that I'm called upon for such an important mission. Even with my legs wobbling and my teeth trembling, I can only raise my head and try to stay confident. </span>
<div style="text-align:left;">
<span style="display:inline-block; opacity:0; animation:fadeIn 1s forwards 2s;">
[[I'll do my very best->SCENE 19]], your highness!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#4D1F19))<div style="text-align:center;">
<span style="font-style:italic;">The King nods in approval at me and stares for a few minutes in silence. </span>
<div style="text-align:right;">
<span class="fade-left king">Zzzzz.... Zzzzzzz. UH? WHAT? Just [[go->SCENE 20]]!</span><div style="text-align:left;">
<span class="fade-right hero">Y-YESS YOUR HIGHNESS!</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Shared fade behavior */
.fade-left, .fade-right {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Timings */
.fade-left {
animation-delay: 2s;
}
.fade-right {
animation-delay: 4s;
}
/* Character colors */
.king {
color: #CA894F; /* King's red */
}
.hero {
color: #78B07A; /* Hero's green */
}
</style>
(enchant:?page,(bg:#4D1F19)+(text-colour:#78B07A))<div style="text-align:center;">
<span id="sceneText" style="opacity:0; transition: opacity 1.5s ease-in; font-style:italic;">I still feel like a carriage ran over me, but I must [[complete the task at hand->SCENE 21]]!</span>
</div>
<script>
let runSound=new Audio("Run_Sound.mp3");
runSound.volume=0.9;
runSound.play();
runSound.addEventListener("ended",()=>{
let text=document.getElementById("sceneText");
if(text)text.style.opacity=1;
if(window.bgMusic){
let fadeOut=setInterval(()=>{
if(window.bgMusic.volume>0.05)window.bgMusic.volume-=0.05;
else{clearInterval(fadeOut);window.bgMusic.pause();window.bgMusic=new Audio("FountainMorning_Ambience.mp3");window.bgMusic.volume=0;window.bgMusic.loop=true;window.bgMusic.play();let fadeIn=setInterval(()=>{if(window.bgMusic.volume<0.5)window.bgMusic.volume+=0.05;else clearInterval(fadeIn)},200)}},200)}else{window.bgMusic=new Audio("FountainMorning_Ambience.mp3");window.bgMusic.loop=true;window.bgMusic.volume=0.5;window.bgMusic.play()}})</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">As I wash my face in the fountain's water, I think to myself.</span>
<span class="fade-left">So... [[How does one rescue a princess?->SCENE 22]]</span>
<span class="fade-right">Well, I definitely need to do something about my puny Sword.</span>
<span class="fade-center">It can barely even cut cheese anymore.</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
color: #78B07A; /* warm gold accent that fits the teal background */
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center; font-style:italic;">
I <span class="hidden-link">[[stand there->SCENE X23]]</span>, deciding what to do... I have two options...
<span class="fade-left">I can go get it fixed at the [[Weapons Shop->SCENE Z23]].</span>
<span class="fade-right">Or I can go learn magic at the [[Magic Store->SCENE Y23]].</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">I turn towards the Magic Store. The smell of freshly brewed potions already in the air.</span>
<span class="fade-left">Yeah! After all, what better time to [[learn magic->SCENE Y24]] than in a highly dangerous and time-sensitive situation!</span>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I turn towards the Weapons shop. The sign already visible through the crowd.</span>
<span class="fade-left">Yeah! After all, that's a smart thing to do! That way, I can eat more cheese during my travels to [[save the Princess->SCENE Z24]]!</span>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
.fade-left {
text-align: left;
animation-delay: 2s;
}
.fade-right {
text-align: left;
animation-delay: 4s;
}
.fade-center {
text-align: left;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">As I stand there pondering what to do next, my attention is caught by someone. [[A woman->SCENE X24]] is entertaining the citizens of the town with a variety of fire tricks while the decorations of yesterday's festival are being taken down.
</span>
</div>
<script>
// Check if the theme is already playing
if (!window.estherTheme) {
// Create a new audio element for Esther_Theme
window.estherTheme = new Audio("Esther_Theme.mp3");
window.estherTheme.loop = false; // play at least once
window.estherTheme.volume = 0; // start at 0 for fade-in
window.estherTheme.play();
// Fade in to target volume (0.2 for quieter playback)
let targetVolume = 0.2;
let fadeInterval = setInterval(() => {
if (window.estherTheme.volume < targetVolume) {
window.estherTheme.volume = Math.min(window.estherTheme.volume + 0.01, targetVolume);
} else {
clearInterval(fadeInterval);
}
}, 100); // increases volume every 0.1s
} else {
// Restart the theme if you re-enter the passage
window.estherTheme.currentTime = 0;
window.estherTheme.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">I enter through the bell-rigged door, the shopkeeper looks directly at me, a [[bored->SCENE Z25]] look on his face. He welcomes me despite how dull his expression is.
</span>
<audio src="ShopBell_Sound.mp3" autoplay></audio>
<span class="fade-left">Welcome, what can we do for you in this fine day?</span>
<span class="fade-right hero-text">Oh... Can you fix my sword?</span>
<span class="fade-center">Sure can!</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: right;
animation-delay: 2s;
color: #38778B; /* warm gold accent */
}
.fade-right {
text-align: left;
animation-delay: 4s;
color: #78B07A; /* matches first line’s green */
}
.fade-center {
text-align: right;
animation-delay: 6s;
color: #38778B; /* warm gold accent */
}
</style>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("WeaponsShop_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("WeaponsShop_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">I look around at all the weapons on display, I notice a silhouette of someone at the corner of the store. They're just staring at some bows on the wall and murmuring about something repeatedly.</span>
<span class="fade-left">One more bow. Just one more.</span>
<span class="fade-right hero-text">Then I'll stop. I can stop. [[I don't have a problem->SCENE Z26]]--</span>
<span class="fade-center">WAIT, IS THAT ELM WOOD?!</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: right;
animation-delay: 2s;
color: #A44446; /* warm gold accent */
}
.fade-right {
text-align: right;
animation-delay: 4s;
color: #A44446; /* matches first line’s green */
}
.fade-center {
text-align: right;
animation-delay: 6s;
color: #A44446; /* warm gold accent */
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I glance toward him, trying to pretend I didn't hear anything. But his head snaps toward me like a hawk spotting prey.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#A44446; text-align:right">
HEY! YOU! You look like someone who appreciates fine curvature!
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;text-align:left">Me?...
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#A44446;text-align:right">
Look at this, this is criminal! These bows are all wrong! The string tension is atrocious and the grip is emotionally unavailable.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 8s;">
<span style="color:#78B07A;text-align:left">I think they look </span>[[fine->SCENE Z27]]...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#A44446;">Fine? FINE?! That's what my ex said before running off with a crossbow user!</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">You can trust a longbow, You can rely on a shortbow. BUT A </span>[[CROSSBOW->SCENE Z28]]<span style="color:#A44446">?!
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">I'm already dazed, and lost in the conversation, what is he even saying anymore? Suddenly, the shopkeeper's expression changes as he notices us. He looks worried about my wellbeing.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#38778B; text-align:center;">
Don't engage, He's been here for three days.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446; text-align:right;">
Three days of reflection! Self-growth! And maybe crying into the quiver once or twice!
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#A44446; text-align:right">
But that's beside the point. I sniff <tw-link style="color:#C8E0BC !important;">[[a quest to save a princess->SCENE Z29]]</tw-link> from you.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left">Wait, how did you--</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446; text-align:right">Shh, destiny speaks through me. I'm coming with you. Not because I want to help, I just need to make my ex jealous.</span>
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#38778B;">Please. </span>[[Take him->SCENE Z30]]<span style="color:#38778B"> He's been monologuing to the display bows since Monday.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I sure as hell am way too hungover to even try to argue about it. Guess i'll take this crazy man with me.</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#A44446; text-align:right">
Don't worry, I'll pull myself together on the road!
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">
He grabs the sword that was already done being sharpened on the counter, throws some coins at the shopkeeper, grabs my arm and pulls me </span>[[out of the store->SCENE Z31]].
</span>
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#443132)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We begin walking towards Guilladin's lair. The field's breeze brushes our hair away from our faces. Beautiful if you ask me, if you ignore the fact that my new companion is humming [[breakup songs->SCENE Z32]] under his breath.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">I continue to gaze at her performance, then I notice, these aren't regular old tricks, these where powerful spells! Not only is she able to conjure advanced magic, she seems to have amazing control over it!
I start [[walking in her->SCENE X25]] direction determined to have her join me in my quest, certainly she will be a valuable ally against Guilladin.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Hello there, my name is (print:$heroName) and--</span>
<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">Hello dear citizen! The Bard Esther at your service!</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C99C3B;">
How can I lift your spirits today? Have you come to <tw-link style="color:#C8E0BC !important;">[[ask->SCENE X26]]</tw-link> for a specific trick?
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Wait, what?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">No need to be shy! The Bard Esther is always ready to bring a smile to the people around her!</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C99C3B;">
Just make sure to toss a coin my way and I'll perform any feat of magic or acrobatics you <tw-link style="color:#C8E0BC !important;">[[request->SCENE X27]]</tw-link>!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">As she says this, she juggles two large rings into the air while simultaneously conjuring balls of fire that go through them.
</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Now that you mention it, I DO have a request for you!</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">Pray tell!</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">
How would you like to <tw-link style="color:#C8E0BC !important;">[[embark->SCENE X28]]</tw-link> on a world changing quest with me?!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">When I finish my question, her demeanor changes dramatically
</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">Look man, I don't do that sort of stuff.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">What do you mean?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C99C3B;">
QUESTS! <tw-link style="color:#C8E0BC !important;">[[I don't DO quests->SCENE X29]]</tw-link>!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">But... If you don't do quests, how are you so proficient in magic?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">My magic is to entertain not fight! I choose to use my talent as a source of joy instead of using it to kill critters.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">
Seems like a <tw-link style="color:#C8E0BC !important;">[[waste of magic->SCENE X30]]</tw-link>...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">Hey, you don't get to tell me how to use the skills I learned by myself!</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">I'm sorry, you're right. It's just... with so much mastery over the arcane arts, think of what you could do.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C99C3B;">
I've thought about it, and I prefer the life of an entertainer. My dream is to <tw-link style="color:#C8E0BC !important;">[[bring a smile->SCENE X31]]</tw-link> to people.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Well, what if I told you, the success of my quest is sure to bring a smile to everyone in the land?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">What do you mean?</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">The fact of the matter is... I've been tasked with rescuing the Princess from Guilladin...</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 8s; color:#C99C3B;">
WHAT??? ARE YOU <tw-link style="color:#C8E0BC !important;">[[CRAZY->SCENE X32]]</tw-link>???
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Look, I know it seems dangerous, but I believe with your help we can actually do this! I've seen what you can do, it's amazing!</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">I don't know... seems like a suicide mission...</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">
Believe me, I know we can do this! I'll even <tw-link style="color:#C8E0BC !important;">[[pay you->SCENE X33]]</tw-link>! Consider this your entertainer fee.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left">Uh... So, what's your name? Tell me a bit about yourself.</span>
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">Oh! I go by </span>[[Harrold->SCENE Z33]]<span style="color:#A44446">, with an H. Like "arrow", but cooler.</span>
</div>
<img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic; text-align:center">Harrold looks to be basking in the amazingness of his name.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left">
...Harold. Right. </span><div style="text-align:right;"><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">Yeah. My ex used to say I was "always </span>[[missing the point->SCENE Z34]]<span style="color:#A44446">".
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">He looks into the distance, seemingly in thought.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left;">
That's... wow. That's really something.</span><div style="text-align:right;"><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">Thanks! I cry about it sometimes. What about </span>[[you->SCENE Z35]]<span style="color:#A44446">?
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">My name is (print:$heroName). I'm just your ordinary adventurer, nothing more nothing less! I just want to save the Princess.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446; text-align=right;">Adorable! I tried saving my ex once. She hired a bodyguard to keep me away from her. Can you believe that?</span><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#A44446;"></span>[[Wow->SCENE Z36]]<span style="color:#78B07A">...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#183442)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">[[We walk the rest of the way->SCENE Z37]] in awkward silence while the breakup songs keep making an appearance here and there.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">After some days of traveling we're finally closing in on Guilladin's lair. The only thing between us and our objective is the infamous mountains surrounding the villain's tower.
The only way to reach it unfortunately, is through a [[cave->SCENE Z38]] that goes across the mountain pass. This cave however, is also full of Guilladin's minions. Crawling with beasts under the wizard's will, it's become the downfall of many adventurers.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">As we venture through this death trap, skeletons of fallen heroes crop up every other corner. Though an [[ill omen->SCENE Z39]] for the fate of our quest, we carry on.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Wait... Did you hear that?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446;">What? I don't hear anything.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">It sounds like...</span>[[FOOTSTEPS->SCENE Z40]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly a light starts emerging at the end of one of the many stone corridors that makes this labyrinth of a cave.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Damn, looks like some of Guilladin's minions are coming our way...</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">Should we get rid of them? A silent arrow with a small explosive from my bow can kill many critters!</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Wait let me </span>[[think->SCENE Z41]]<span style="color:#78B07A">. We need to be smart about this.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center; font-style:italic;">
What should we do?
<span class="fade-left">Should we try and [[kill them silently->SCENE ZA42]]?</span>
<span class="fade-right">Or should we try to [[lay low and pass undetected->SCENE ZB42]]?</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Ok Harrold, I'm going to trust you. We should clear this lot before we continue.</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">Don't worry, I'll show you how </span>[[dependable->SCENE ZA43]]<span style="color:#A44446"> I am, regardless of what my ex says about me...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">Ok Harrold, we should try and </span>[[hide->SCENE ZB43]]<span style="color:#78B07A"> from these monsters. No use in tiring ourselves out before we reach Guilladin.</div><div style="text-align:right;">
</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446;">I guess you're right... I'll follow your lead.</span>
</div>
<img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">As he says this his hands begin to tremble and tears begin to well up in his eyes.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Uh... Harrold? Are you ok?</span></div><div style="text-align:right;"><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#A44446;">I'll show her! </span>[[Undependable->SCENE ZA44]]<span style="color:#A44446"> my ass! I'm the most dependable man alive!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Before he can settle down, the beasts make themselves known. Alerted by Harrold's emotional crisis, a mob of goblins rush down towards us.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">Harrold </span>[[NOW->SCENE ZA45]]<span style="color:#78B07A">!!!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I scream the command, Harrold lets go of the bow string. Through the dark of the cave the arrow with the explosive flies until it [[hits->SCENE ZA46]] ...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">...the wall way behind the mob that is running towards us.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
YOU IDIOT!</span></div><div style="text-align:right;"><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446;">
OH GOD SHE WAS RIGHT! I AM UNDEPENDABLE!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Let's just hope we can get out of this </span>[[alive->SCENE ZA47]]<span style="color:#78B07A">.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Bracing myself for the worst, I ready my sword and face the horde in front of us.
I manage to cut some of the goblins attacking us. It's all in vain however, as the mob quickly overpowers us and [[our fates are sealed->SCENE ZA48]] in the cave like many adventurers before us.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
Wait... No no, that's not right. I must've made a mistake somewhere along the story. It must be the booze. Let me go [[back a bit->SCENE Z40]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">Before the creatures get wind of our presence in the cave. We hide ourselves in one of the many crevasses in the rock walls, in hopes that they simply pass by us.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
Ok, don't make any sound now. we gotta keep [[quiet->SCENE ZB44]]...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">As a pack of goblins make their way through the cave's path, we're fortunate enough to remain undetected.
I make sure they all pass before giving Harold the signal.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
Let's get out of here [[slowly->SCENE ZB45]], we don't want to alert any more attention..
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We slowly get out of our hiding spots doing our best to make as little noise as possible. When [[suddenly->SCENE ZB46]] ...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">...Harold kicks a rock down the stony path.
The echoes ring throughout the cave and through the many paths. I can hear the noises of hundreds of creatures being alerted to intruders.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
DARNIT! QUICK! RUN!!</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446;">
I'M SO SORRY!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">LET'S JUST HOPE WE CAN GET OUT OF THIS </span>[[ALIVE->SCENE ZB47]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We run faster than we've ever run before. Trying our best to avoid any path from which sounds of monsters can be heard, we make our way through the cavernous maze. After what seems like an hour of running, we finally reach an exit.
Exausted from the ordeal, we're amazed at how we were able to break lose from the monster's pursuit. Not only that but we've actually reached the other side of the mountain path. We're finally at [[Guilladin's doorstep->SCENE ZB48]]...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">As we enter the tower we can feel the shift in atmosphere. A chilling draft runs through the dimly lit structure. As [[we venture->SCENE ZB49]] along the tower's corridors the silence becomes almost unbearable, only broken by the slight sound of our footsteps as we try to make as little noise as possible.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("GuilladinTower_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("GuilladinTower_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I enter through the magic rigged door, the shopkeeper doesn't even look my way, they seem to be too focused on the [[magic->SCENE Y25]] runes in front of them.
</span>
<audio src="ShopBell_Sound.mp3" autoplay></audio>
<span class="fade-left">Hi! Do you have any enchanted books I can buy?</span>
<span class="fade-right hero-text">Yeah, yeah fourth isle at the back.</span>
</div><img src="Hero.png" width="300" align="left">
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Different text color for the fading phrases */
.fade-left, .fade-right, .fade-center {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Position + timing for each line */
.fade-left {
text-align: left;
animation-delay: 2s;
color: #78B07A; /* warm gold accent */
}
.fade-right {
text-align: right;
animation-delay: 4s;
color: #38778B; /* matches first line’s green */
}
.fade-center {
text-align: center;
animation-delay: 6s;
color: #38778B; /* warm gold accent */
}
</style>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("MagicStore_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("MagicStore_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">I take my leave to go in the direction mentioned. Out of the silence of the store I can hear some weirdly muffled explosions.
Maybe it's still some fireworks being shot off from last night's festival? Either way I need to find [[those books->SCENE Y26]].
</span>
</div>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">The sounds keep getting louder but still muffled, and now I can hear some angry muffled screams too. Out of the corner of my eye [[I can see a faint glow->SCENE Y27]] from the other side of the shelf.
</span>
</div>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I peak from in between two books and notice someone inside what seems to be some sort of magical bubble. They are screaming at a book while [[completely destroying->SCENE Y28]] it with explosions.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#7242A6;">
WHY DON'T YOU WORK YOU EVIL SPAWN OF GUILLADIN.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Another muffled explosion rocks the shelf, making a couple books fall near my feet. I cautiously peak again. The mage is now shaking the book violently like it owes him money.</span></spin><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#7242A6;">
You think you're smarter than me, HUH?!</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">
Uh... Are you okay there?</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#7242A6;">Do I look okay?! This cursed spellbook refuses to </span>[[cooperate->SCENE Y29]]<span style="color:#7242A6">! I said "Fireball" and it gave me "Fog"! FOG!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">The bubble suddenly fizzles out with a pop, singeing the mage's hair slightly. He just sighs utterly defeated.
The mage glares at the smoking remains of the spellbook, then casually kicks it under the shelf like it never existed.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#7242A6;">
Useless piece of parchment. Anyway, Hi! Didn't see you there.</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
Yeah, kind of hard to miss with the cursing and the... [[explosions->SCENE Y30]].
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#7242A6;">
Ah, yes. Controlled experiments. Mostly. I am Castor, former Magic Academy Student and currently self-taught.</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">
Why not continue at the academy?</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#7242A6;"></span>[[Long story->SCENE Y31]]<span style="color:#7242A6">, let's just say that most mages don't like close ranged battles.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I gulp, worried about the history of this curious mage.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
I'm (print:$heroName), I'm an adventurer, currently trying to retrieve the princess from Guilladin's grasp</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#7242A6;">Did you just say... A chance to prove that mages should invest in close range combat?! </span>[[Where do I sign my name->SCENE Y32]]<span style="color:#7242A6">?!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I feel confused, I never even invited him to acompany me.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Wait! We haven't even--</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#7242A6;">Details! Trivial! </span>[[Let's go->SCENE Y33]]<span style="color:#7242A6">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We hurry off [[toward Guilladin->SCENE Y34]]. Castor is practically bouncing beside me, ready for some bloodshed.
</span>
</div>
(enchant:?page,(bg:#37333D)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">After some days of traveling we're finally closing in on Guilladin's lair. The only thing between us and our objective is the infamous mountains surrounding the villain's tower.
The only way to reach it unfortunately, is through a [[cave->SCENE Y35]] that goes across the mountain pass. This cave however, is also full of Guilladin's minions. Crawling with beasts under the wizard's will, it's become the downfall of many adventurers.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">As we venture through this death trap, skeletons of fallen heroes crop up every other corner. Though an [[ill omen->SCENE Y36]] for the fate of our quest, we carry on.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Wait... Did you hear that?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#7242A6;">What do you mean? These blasted caves are as silent as the grave.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">
It sounds like... <tw-link style="color:#C8E0BC !important;">[[FOOTSTEPS->SCENE Y37]]</tw-link>!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))
<div style="text-align:center;">
<span style="font-style:italic;">Suddenly a light starts emerging at the end of one of the many stone corridors that makes this labyrinth of a cave.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Damn, looks like some of Guilladin's minions are coming our way...</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#7242A6;">Finally some action! Let me at them, I'll make short work of them!</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Wait let me </span>[[think->SCENE Y38]]<span style="color:#78B07A">. We need to be smart about this.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center; font-style:italic;">
What should we do?
<span class="fade-left">Maybe we should [[hide->SCENE YA39]]? Is it really safe to fight here?</span>
<span class="fade-right">No, I shouldn't [[hesitate->SCENE YB39]]. I have to tell Castor to be safe.</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Quick Castor, hide!</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#7242A6;">What?? I'm not a coward!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Just </span>[[trust me->SCENE YA40]]<span style="color:#78B07A">! There's plenty of time to fight when we reach Guilladin.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Before I can formulate a plan Castor starts charging up some kind of spell and runs forward.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
CASTOR, WAIT!</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#7242A6;">WAITING IS FOR COWARDS! HEROES </span>[[ACT->SCENE YB40]]<span style="color:#7242A6">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We quickly hide in some crevasses in the rock walls that run along the cave. I hope these creatures aren't smart enough to check every [[nook and cranny->SCENE YA41]] for intruders.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly, as a mob of goblins aproaches, I can feel Castor rustling next to me. As I look at him I can feel his uneasiness.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Please, don't...</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#7242A6;">I have to! I'M NOT A </span>[[COWARD->SCENE YA42]]<span style="color:#7242A6">!!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Castor screams, he jumps out in front of the horde of goblins that are passing by us.</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#7242A6;">GET READY TO TASTE THE WRATH OF </span>[[THE MIGHTY CASTOR->SCENE YA43]]<span style="color:#7242A6"> GOBLIN SCUM!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Before he can even lifts his staff, a [[goblin->SCENE YA44]]'s sword quickly strikes him down.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
CASTOR!!!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Alone and surrounded by goblins, I can sense my impeding doom.
I try to cut some of the goblins attacking me, however, I have little success as I didn't even have time to sharpen my sword before Castor dragged me out of town with him. The mob quickly overpowers me and [[my fate is sealed->SCENE YA45]] in the cave like many adventurers before me.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
Wait... No no, that's not right. I must've made a mistake somewhere along the story. It must be the booze. Let me go [[back a bit->SCENE Y37]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">As he says this he charges towards the goblin mob that suddenly appears at the end of the visible path. Creating a ball of fire that surrounds him, his [[reckless->SCENE YB41]] attack is suprisingly effective, mowing down a great chunk of the horde.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">However sucessful his attack is, it only ends up alerting more monsters to our presence. Along the paths of the cavern, a deafening sound of [[creatures gathering->SCENE YB42]] to our location can be heard.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">I turn around and ready my weapon as I brace myself for the incoming attack, as Castor screams battlecries behind me. And then I realize, I didn't get my sword sharpened...</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
Hey [[Castor->SCENE YB43]]? I might need some help here...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Castor.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I look towards Castor all I see is an Ogre thrice my size. I can see Castor starting to cast a spell to attack the behemoth but he is struck down before he can conjure anything.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
[[Oh no->SCENE YB44]]...
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Frozen in fear I stand there. As the Ogre closes in on me I see his club descend upon me while a single thought runs through my head. [[Where did I go wrong?->SCENE YB45]]
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
No, no, no. That makes no sense at all! I must've gotten confused at some point. Let me [[start over->SCENE 6]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">I mean... I do need the money if I want to start that new business... Ok I'll do it, but I warn you, I'm getting out if I don't see a chance of surviving!</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">
I promise you, when we're finished <tw-link style="color:#C8E0BC !important;">[[everyone will smile->SCENE X34]]</tw-link> when they hear your name.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">With the deal made, she packs her belongings while I make a quick stop at the weapon's shop to get my sword sharpened. As soon as we get our things in order we set out towards Guilladin's lair.
</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">I've been meaning to ask, what's your name?</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">What do you mean? I already told you...</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A;">
All you told me was that you were some kind of <tw-link style="color:#C8E0BC !important;">[[jester bard->SCENE X35]]</tw-link>...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">No, I told you I'm the BARD ESTHER!</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A;">Exactly! A bard and a jester.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C99C3B;">I'M ESTHER! I'M A BARD NAMED ESTHER!</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 8s; color:#78B07A;">Oh, well that's kind of on you...</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 10s; color:#C99C3B;">So you mean you didn't care to ask my name up until now?</span></div><div style="text-align:left;"><span style="display:block; opacity:0; animation:fadeIn 2s forwards 12s; color:#78B07A;">
I had more pressing thoughts on my mind... After all we have a <tw-link style="color:#C8E0BC !important;">[[quest->SCENE X36]]</tw-link> to complete!</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 14s; color:#C99C3B;">Unbelievable...</span>
</span></div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Make the last span fade in as before */
span[style*="animation:fadeIn"] {
display: block;
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))
<div style="text-align:center;">
<span style="font-style:italic;">After some days of traveling we're finally closing in on Guilladin's lair. The only thing between us and our objective is the infamous mountains surrounding the villain's tower.
The only way to reach it unfortunately, is through a [[cave->SCENE X37]] that goes across the mountain pass. This cave however, is also full of Guilladin's minions. Crawling with beasts under the wizard's will, it's become the downfall of many adventurers.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Cave_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">As we venture through this death trap, skeletons of fallen heroes crop up every other corner. Though an [[ill omen->SCENE X38]] for the fate of our quest, we carry on.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">Wait... Did you hear that?</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C99C3B;">Are those </span>[[footsteps->SCENE X39]]<span style="color:#C99C3B">?
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly a light starts emerging at the end of one of the many stone corridors that makes this labyrinth of a cave.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Damn, looks like some of Guilladin's minions are coming our way...</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C99C3B;">Quick we should hide. It sounds like there's too many of them for us to handle.</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Wait let me </span>[[think->SCENE X40]]<span style="color:#78B07A">...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center; font-style:italic;">
What should we do?
<span class="fade-left">Should we try and [[kill them->SCENE XA41]] so they cant follow us after? Surely with Esther's proficiency in magic we can make short work of them.</span>
<span class="fade-right">Or should I listen to Esther, and try to [[lay low->SCENE XB41]] so we can pass undetected?</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))
<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
I think we should fight.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B;">
What? Are you insane?</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;"></span>[[Trust me->SCENE XA42]]<span style="color:#78B07A">. If we don't do anything about them now they'll only catch us later. I'm sure that with your magic and my sword we can make short work of these creatures.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
Ok, maybe you're right, we shoud hide and let them go past us.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C99C3B;">Quick there's bound to be a spot we can </span>[[pass undetected->SCENE XB42]]<span style="color:#C99C3B">.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">
I seriously hope I haven't made a mistake in coming with you in this stupid quest...</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Just believe in me ok? We'll take care of these </span>[[monsters->SCENE XA43]]<span style="color:#78B07A"> and then rid the world of Guilladin.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">The beasts make themselves known. At the end of one of the stony paths, a mob of goblins appears, and alerted by our presence, start rushing down towards us.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">This is it Esther, are you </span>[[ready->SCENE XA44]]<span style="color:#78B07A">?
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I look to where she was standing, all I see are the rocks that form this cave. Behind me I can see Esther running back towards the path we just took to get here.</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A;">
ESTHER???</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C99C3B;">That's too many goblins man, I told I wasn't down for a suicide mission! </span>[[Good luck->SCENE XA45]]<span style="color:#C99C3B">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">I try to focus my sights back on the goblin horde but I'm too slow to react. Before I can do anything one of the creature's sword [[strikes down->SCENE XA46]] on me.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">As my consciousness [[fades->SCENE XA47]], the only question that runs through my head is why it had to be me. Was there really no one else that could've taken this quest?
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
Wait... No no, that's not right. I must've made a mistake somewhere along the story. It must be the booze. Let me go [[back a bit->SCENE X39]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">Before the creatures get wind of our presence in the cave. We hide ourselves in one of the many crevasses in the rock walls, in hopes that they simply pass by us.</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#C99C3B;">Keep </span>[[quiet->SCENE XB43]]<span style="color:#C99C3B"> now, they'll pass us by in no time...
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">As a pack of goblins make their way through the cave's path, we're fortunate enough to remain undetected.
We make sure they all pass before leaving our hiding spots.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">Let's get out of here </span>[[slowly->SCENE XB44]]<span style="color:#78B07A">, we don't want to alert their attention.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">We start making our way through the path we were following, Esther suddenly stops me.</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#C99C3B;">Wait, for </span>[[good measure->SCENE XB45]]<span style="color:#C99C3B">.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">She conjures up a small levitation spell that makes us hover a few inches above the floor.</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">
This way we won't make any unwanted noise.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;"></span>[[Good thinking->SCENE XB46]]<span style="color:#78B07A">.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#1C1C1C)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">Trying our best to avoid any path from which sounds of monsters can be heard, we make our way through the cavernous maze. After what seems like an hour of running, we finally reach an exit.
Happy that we managed to go through the cave while avoiding conflicts, we reach the other side of the mountain path without exausting ourselves. We're finally at [[Guilladin's doorstep->SCENE XB47]]...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#1C1C1C))<div style="text-align:center;">
<span style="font-style:italic;">We enter the tower and immediately feel the shift in atmosphere. A chilling draft runs through the dimly lit structure. As [[we venture->SCENE XB48]] along the tower's corridors the silence becomes almost unbearable, only broken by the slight sound of our footsteps as we try to make as little noise as possible.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("GuilladinTower_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("GuilladinTower_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
[[You enter the tavern.->SCENE 0]]
</div>
<style>
tw-link {
color: #7C3333 !important;
text-decoration: none;
}
tw-link:hover {
color: #2D0304 !important;
}
tw-link.visited {
color: #541A1A !important;
}
</style>
(enchant:?page,(text-colour:#38778B)+(bg:#948D8D))
<div style="text-align:center;">
<span style="font-style:italic;">We climb through the floors of the tower, with the growing unease from the lack of resistance along our way. Near the top of the structure we finally reach an enormous throne room. At the end of the room, near a gigantic black onyx throne we can see a [[cage->SCENE ZB50]].
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left">Is that? The Princess?</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C569B3; text-align:right">Hello? Who's there?</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Princess! We're here to </span>[[Save you->SCENE ZB51]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">We rush to her aid trying to unlock the cage she's in.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C569B3; text-align:right;">
Oh thank god you're here, did my father send you?
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A; text-align:left;">
Yes, the King tasked us with getting you back to the castle safe and sound.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C569B3; text-align:right">
Well <tw-link style="color:#C8E0BC !important;">[[it's about time->SCENE ZB52]]</tw-link>, have you seen the conditions I've had to endure? I mean, who puts a person in a cage?
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#A44446;">Her hair... It's just like hers...</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">You ok Harrold? </span>[[Help me->SCENE ZB53]]<span style="color:#78B07A"> pick this lock.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly, the cage is lifted from where it stands through a chain linking it to the ceiling. From the shadows a tremendous figure emerges. Towering above us, a cloaked man stares at us with his hidden features. As a deep gutural [[voice emerges->SCENE ZB54]] from the void inside the hood we know that this foe is the evil wizard himself, Guilladin.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">PITIFUL FOOLS. IT WAS FUN SEEING YOU SQUIRM INSIDE MY TOWER, BUT I'M AFRAID YOU'LL SQUIRM NO LONGER. TASTE THE FEELING OF DESPAIR AS YOU REALIZE HOW CLOSE YOU WERE TO YOUR GOAL BEFORE I END YOUR MISERABLE LITTLE LIVES!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">HARROLD, </span>[[FALL BACK->SCENE ZB55]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center; font-style:italic;">
We both jump back as we ready ourselves for the battle to come. What should we do?
<span class="fade-left">Should we split our focus? Have Harrold try and [[free the Princess->SCENE ZBA56]] while I attack Guilladin?</span>
<span class="fade-right">Or should we both [[focus our attacks->SCENE ZBB56]] on the villain and leave the freeing of the Princess for after the battle?</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#2D2C3E)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">With my decision made I lean into Harrold and whisper to plan so we can catch Guilladin by surprise.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left;">Harrold, try to <tw-link style="color:#C8E0BC !important;">[[break the chain->SCENE ZBA57]]</tw-link> holding up the princess with one of your arrows while I distract Guilladin.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#A44446; text-align:right;">
Are you sure? He's not someone you can take lightly...
</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A; text-align:left">Believe in me, I just need to distract him while you get the Princess to safety.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">TIME TO MEET YOUR MAKER YOU PUNY LITTLE ANTS</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Harrold </span>[[back me up->SCENE ZBB57]]<span style="color:#78B07A">! We can take him down if we focus our attacks.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">STOP WHISPERING WORMS! THERE'S NOTHING YOU CAN DO TO CHANGE YOUR FATES! EVERYTHING SUCCUMBS TO THE WILL OF GUILLADIN!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;"></span>[[Let's do this->SCENE ZBA58]]<span style="color:#78B07A"> Harrold!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I start charging towards Guilladin, sword in hand.
</div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">COME AT ME WITH ALL YOUR MIGHT INSECT. IN THE END THE OUTCOME WILL BE THE SAME.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Don't </span>[[underestimate us->SCENE ZBA59]]<span style="color:#78B07A"> wizard. This insect has a bite.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Harrold readies his bow and takes aim at the chain holding the Princess' cage. As the weight of his next action settles in his mind, his hands start trembling.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#A44446;">Come on Harrold, you can do this. Think what she'll say when she hears about your </span>[[deeds->SCENE ZBA60]]<span style="color:#A44446">.
</span>
</div><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I could physically see that thoughts of his ex-girlfriend rush to his head.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#A44446;">Think how she'll hold you when you come back. The warmth of her skin... The smell of her hair... Just like the </span>[[princess'->SCENE ZBA61]]<span style="color:#A44446"> hair...
</span>
</div><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Harrold's eyes stray toward the Princess and at this moment, his hands can hold no longer. An arrow flies across the room, nestling itself into the [[Princess' head->SCENE ZBA62]].
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">As the sound of the Princess' body going limp and hitting the cage's floor echoes through the room, I am frozen in place. I look at the grizzly result of Harrold's arrow and then at the man himself. I see him, pale as a ghost, with an expression of terror across his face. Just as Guilladin's vicious spells [[strike me down->SCENE ZBA63]], one single word escapes my lips.
</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">How...
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
WHAT? THE PRINCESS? DEAD? That makes no sense at all! I must've gotten confused at some point. Let me [[start over->SCENE 6]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">Harrold readies his bow and aims it at the villain's hidden face.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#A44446;">We'll </span>[[end Guilladin's reign->SCENE ZBB58]]<span style="color:#A44446"> and she'll finally realize how much better I am than her new boyfriend!
</span>
</div><img src="Harrold.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">As I charge towards Guilladin, Harrold's arrow flies across the room, hopefully creating an opening for me sink my sword into him.
</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">Your </span>[[tyranny ends->SCENE ZBB59]]<span style="color:#78B07A"> here Guilladin!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Before we can even touch him, Guilladin waves his hand and both me and the arrow are propelled backwards.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#655FAF;">ENOUGH OF THIS NONSENSE. I HAVE NO MORE TIME TO KEEP </span>[[PLAYING->SCENE ZBB60]]<span style="color:#655FAF"> WITH YOU!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">The wizard releases a bolt of dark lightning that shoots it's way towards Harrold. As the bolt pierces him I'm left in shock at the true [[gap->SCENE ZBB61]] between our strength at that of the wizard.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Before I can fully recover from the blast that made me fly across the room, I see a ball of flame engulfing my vision, and soon after, myself. As my vision goes dark and my [[consciousness fades->SCENE ZBB62]], I curse the fate that was aloted to me.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
Wait... No no, that's not right. I must've made a mistake somewhere along the story. It must be the booze. Let me go [[back a bit->SCENE ZB53]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">We climb through the floors of the tower, with the growing unease from the lack of resistance along our way. Near the top of the structure we finally reach an enormous throne room. At the end of the room, near a gigantic black onyx throne we can see a [[cage->SCENE XB49]].
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))
<div style="text-align:center;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left">Is that? The Princess?</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C569B3; text-align:right">Hello? Who's there?</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s;">
<span style="color:#78B07A;">Princess! We're here to </span>[[Save you->SCENE XB50]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">We rush to her aid trying to unlock the cage she's in.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C569B3; text-align:right;">
Oh thank god you're here, did my father send you?
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A; text-align:left;">
Yes, the King tasked us with getting you back to the castle safe and sound.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C569B3; text-align:right">
Well <tw-link style="color:#C8E0BC !important;">[[it's about time->SCENE XB51]]</tw-link>, have you seen the conditions I've had to endure? I mean, who puts a person in a cage?
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">Well, isn't she a delightful person...</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Come on Esther, </span>[[Help me->SCENE XB52]]<span style="color:#78B07A"> with this lock.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly, the cage is lifted from where it stands through a chain linking it to the ceiling. From the shadows a tremendous figure emerges. Towering above us, a cloaked man stares at us with his hidden features. As a deep gutural [[voice emerges->SCENE XB53]] from the void inside the hood we know that this foe is the evil wizard himself, Guilladin.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">PITIFUL FOOLS. IT WAS FUN SEEING YOU SQUIRM INSIDE MY TOWER, BUT I'M AFRAID YOU'LL SQUIRM NO LONGER. TASTE THE FEELING OF DESPAIR AS YOU REALIZE HOW CLOSE YOU WERE TO YOUR GOAL BEFORE I END YOUR MISERABLE LITTLE LIVES!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">ESTHER, </span>[[FALL BACK->SCENE XB54]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center; font-style:italic;">
We both jump back as we ready ourselves for the battle to come. What should we do?
<span class="fade-left">Should we split our focus? Should Esther try and [[free the Princess->SCENE XBA56]] while I attack Guilladin?</span>
<span class="fade-right">Or should we both [[focus our attacks->SCENE XBB56]] on the villain and leave the freeing of the Princess for after the battle?</span>
</div>
<style>
/* Make only the “stand there” link match normal text */
.hidden-link tw-link {
color: #78B07A !important;
text-decoration: none !important;
}
.hidden-link tw-link:hover {
color: #78B07A !important;
text-decoration: none !important;
}
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-left, .fade-right, .fade-center {
color: #78B07A;
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
font-style:italic;
}
.fade-left {
text-align: center;
animation-delay: 2s;
}
.fade-right {
text-align: center;
animation-delay: 4s;
}
.fade-center {
text-align: center;
animation-delay: 6s;
}
</style>
(enchant:?page,(bg:#2D2C3E)+(text-colour:#78B07A))
<div style="text-align:center;">
<span style="font-style:italic;">Having made my decision I share my plan with Esther.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#78B07A; text-align:left;">Esther <tw-link style="color:#C8E0BC !important;">[[get the princess out->SCENE XBA57]]</tw-link> of here. I'll take care of Guilladin.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C99C3B; text-align:right;">
Are you crazy? You'll die!
</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#78B07A; text-align:left">Don't worry about me. The Princess is our priority. Besides, I'm surprisingly good in close quarters. Just have to get near him.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">TIME TO MEET YOUR MAKER YOU PUNY LITTLE ANTS</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Esther </span>[[back me up->SCENE XBB57]]<span style="color:#78B07A">! We can take him down if we focus our attacks.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">STOP WHISPERING WORMS! THERE'S NOTHING YOU CAN DO TO CHANGE YOUR FATES! EVERYTHING SUCCUMBS TO THE WILL OF GUILLADIN!</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;"></span>[[Let's go->SCENE XBA58]]<span style="color:#78B07A"> Esther!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I start charging towards Guilladin, sword in hand.
</div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">COME AT ME WITH ALL YOUR MIGHT INSECT. IN THE END THE OUTCOME WILL BE THE SAME.</span></div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">Don't </span>[[underestimate us->SCENE XBA59]]<span style="color:#78B07A"> wizard. This insect has a bite.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">As I engage in combat with Guilladin, Esther uses her magic to free the Princess' cage from the chain and lowers it to [[safety->SCENE XBA60]].
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#C569B3;">Careful! Put me down slowly!
</span>
</div><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">The cage hits the ground, Esther runs towards it and with a small explosive spell breaks the lock.</span></div>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B; text-align:right;">Quickly Princess, <tw-link style="color:#C8E0BC !important;">[[let's get out of here->SCENE XBA61]]</tw-link>.
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#C569B3; text-align:right;">
I just want to get back to my bed. Sleeping in an iron floor has been terrible for my lower back.
</span>
</div><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">While I struggle in my fight with Guilladin, I can see Esther and the Princess running away through the room's entrance. It's not long before the wizard notices the empty cage and realizes what just happened.
</div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#655FAF;">NO! HOW DARE YOU!</span>[[ENOUGH OF THESE GAMES->SCENE XBA62]]<span style="color:#655FAF">! I HAVE MICE TO CATCH
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">With these words his attacks become more fearsome. Exhausted from the battle so far, I am unable to keep up with the new barrage of spells that he throws at me. As I am hit and fall to the ground I can feel my life slowly drifting away as my [[vision fades->SCENE XBA63]], hoping that somehow, they both were able to return safely to the kingdom.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
WHAT? THE HERO? DEAD? That makes no sense at all! I must've gotten confused at some point. Let me [[go back a bit->SCENE XB52]]...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#57402B))<div style="text-align:center;">
<span style="font-style:italic;">I ready my sword and start charging at Guilladin while Esther falls back to conjure up some magic.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#655FAF;">YOU WORMS THINK YOU CAN TAKE ME DOWN? I'LL SHOW YOU WHAT </span>[[TRUE POWER->SCENE XBB58]]<span style="color:#655FAF"> IS CAPABLE OF!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Guilladin.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">As I charge towards Guilladin, the wizard shoots dark bolts of lightning in my direction. Unable to react fast enough to dodge them, I see my life flash before my eyes. [[Until->SCENE XBB59]]...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">...a flash of light engulfs my vision and the bolt that was heading my direction dissipates. I look at Esther and realize she was the one that saved me from Guilladin's attack.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#C99C3B;">Don't stop! Go straight for </span>[[the kill->SCENE XBB60]]<span style="color:#C99C3B">.
</span>
</div><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I continue my charge, taking advantage of the distraction Esther caused the villain from deflecting his spell. As I get closer to my target, my sword begins to glow with arcane energy. An enchantment that Esther is casting to aid me in defeating this vile being.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">You've underestimated us Guilladin, and that will be your </span>[[downfall->SCENE XBB61]]<span style="color:#78B07A">!
</span>
</div><img src="Hero.png" width="300" align="left">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">I jump as I reach striking distance, and put all my weight into one single thrust. As my blade sinks into the wizards chest, a blood curling scream can be heard across the tower. Dark energy is expelled from the wound I cause, and I get [[pushed back->SCENE XBB62]] by some kind of force being expelled with it.
</span>
</div>
<audio src="Guilladin_Sound.mp3" autoplay></audio>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">When I look back at the wizard, he begins to crumble unto itself, until there's nothing left but his clothes and dust on the ground.
</div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#C99C3B;">Is he really </span>[[dead->SCENE XBB63]]<span style="color:#C99C3B">?
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">Suddenly, the walls and floor of the tower begin to tremble, threatening to collapse at any moment.
</div><div style="text-align:left;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s;">
<span style="color:#78B07A;">Quick we have to </span>[[get out->SCENE XBB64]]<span style="color:#78B07A"> of here!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))
<audio src="Earthquake_Sound.mp3" autoplay></audio><div style="text-align:center;">
<span style="font-style:italic;">In an instant, Esther uses her magic to safely lower the Princess' cage, while i swiftly strike the lock with my newly enchanted sword.
</div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C569B3;">You did it! You killed Guilladin.</span></div><div style="text-align:right;">
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C99C3B;">No time to talk! Let's just </span>[[get out->SCENE XBB65]]<span style="color:#C99C3B"> of here!
</span>
</div><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">We run through the dimly lit corridors of the tower, avoiding the falling debris that precedes the tower's demise. We almost exhaust ourselves until we are finally able to see [[light->SCENE XBB66]]!
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#2D2C3E))<div style="text-align:center;">
<span style="font-style:italic;">As we exit to the fields outside of the wizards tower, the structure crumbles behind us leaving only piles of rubble where it stood. The world around us stops shaking and a [[calm->SCENE XBB67]] washes over us.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B; text-align:right;">I can't believe it...</div>
</span><span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s; color:#78B07A; text-align:left;"><tw-link style="color:#C8E0BC !important;">[[We did it->SCENE XBB68]]</tw-link>! We actually did it! I told you we could do it!
</span>
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 6s; color:#C569B3; text-align:right">I can't believe Guilladin died because he kidnapped ME! I knew I was special!
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<script>
// Check if the theme is already playing
if (!window.estherTheme) {
// Create a new audio element for Esther_Theme
window.estherTheme = new Audio("Victory_Theme.mp3");
window.estherTheme.loop = false; // play at least once
window.estherTheme.volume = 0; // start at 0 for fade-in
window.estherTheme.play();
// Fade in to target volume (0.2 for quieter playback)
let targetVolume = 0.2;
let fadeInterval = setInterval(() => {
if (window.estherTheme.volume < targetVolume) {
window.estherTheme.volume = Math.min(window.estherTheme.volume + 0.01, targetVolume);
} else {
clearInterval(fadeInterval);
}
}, 100); // increases volume every 0.1s
} else {
// Restart the theme if you re-enter the passage
window.estherTheme.currentTime = 0;
window.estherTheme.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">After resting for a while from the ordeal, we begin our [[journey back home->SCENE XBB69]]. Along the way we find that many of Guilladin's minion have left the lands that they used to terrorize, and the few that we encounter don't even dare come close to us. They must've sensed their master's demise in some way...
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">When we reach town a crowd starts to slowly form as more and more people take notice of the Princess that acompanies us. Not before long some guards approach us and [[escort->SCENE XBB70]] us to the castle.
</span>
</div>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
<span style="font-style:italic;">We have an audience with the King and tell him about our adventure.</span>
<div style="text-align:right;">
<span class="fade-left king">Seriously?!? Guilladin is defeated at last? How wonderful!</span><div style="text-align:right;">
<span class="fade-right king">And my precious daughter, safe and sound. How can I [[repay->SCENE XBB71]] such valiant heroes?</span>
</div>
<style>
/* Fade-in animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Shared fade behavior */
.fade-left, .fade-right {
display: block;
opacity: 0;
animation: fadeIn 2s forwards;
}
/* Timings */
.fade-left {
animation-delay: 2s;
}
.fade-right {
animation-delay: 4s;
}
/* Character colors */
.king {
color: #CA894F; /* King's red */
}
.hero {
color: #78B07A; /* Hero's green */
}
</style>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("ThroneRoom_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("ThroneRoom_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(bg:#4D1F19)+(text-colour:#78B07A))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#C99C3B;">
Well... I do have a business idea that needs some funding...</span></div><div style="text-align:left;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#78B07A;">The knowledge that all is well is reward enough for me your majesty. Simply feel free to call me any time you need my </span>[[help->SCENE XBBB72]]<span style="color:#78B07A"> again.
</span>
</div><img src="Hero.png" width="300" align="left"><img src="Esther.png" width="300" align="right">
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#4D1F19)+(text-colour:#78B07A))<div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 2s; color:#CA894F;">
Do not worry my heroes, I'll make sure you get to live the <tw-link style="color:#C8E0BC !important;">[[rest of your lives->SCENE XBB73]]</tw-link> as well as I could. You have my word
</span></div><div style="text-align:right;">
<span style="display:block; opacity:0; animation:fadeIn 2s forwards 4s;">
<span style="color:#C569B3;">Feel free to come visit us whenever you like, you two. I'll make you a sandwich.
</span>
</div>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
(enchant:?page,(bg:#4D1F19)+(text-colour:#78B07A))<div style="text-align:center;">
<span style="font-style:italic;">And so [[peace was brought to our world->SCENE XBB74]]. Esther got the funds she needed to create a magic school focused on entertainment, while (print:$heroName) was free to live out the rest of their days helping those in need.
</span>
</div>
<script>
if (window.bgMusic) {
let fadeOut = setInterval(() => {
if (window.bgMusic.volume > 0.05) {
window.bgMusic.volume -= 0.05;
} else {
clearInterval(fadeOut);
window.bgMusic.pause();
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.volume = 0;
window.bgMusic.loop = true;
window.bgMusic.play();
// Fade in the new one
let fadeIn = setInterval(() => {
if (window.bgMusic.volume < 0.5) {
window.bgMusic.volume += 0.05;
} else {
clearInterval(fadeIn);
}
}, 200);
}
}, 200);
} else {
// if no music was playing before
window.bgMusic = new Audio("Field_Ambience.mp3");
window.bgMusic.loop = true;
window.bgMusic.volume = 0.5;
window.bgMusic.play();
}
</script>
(enchant:?page,(text-colour:#78B07A)+(bg:#183442))<div style="text-align:center;">
And that's how we can live our lives free of worry from a monster invasion or a tyrannical wizard.
Doesn't that story just bring a [[smile to your face->SCENE XBB75]]? Knowing that there'll always be someone willing to fight for peace and the good of the world...
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))<div style="text-align:center;">
What? You want more tales? You have to take pity on an old man like me, I'm too tired tonight to keep going.
[[Come back->SCENE 6]] another day, maybe then I'll tell you another story.
</div>
(enchant:?page,(text-colour:#38778B)+(bg:#473E35))